<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="admin/layout/include::head('页面编辑','')"></head>
<body>
<form id="data-form" lay-filter="data-form" class="layui-form model-form">
    <input name="pageId" type="hidden"/>
    <div class="layui-form-item" style="width: 60%">
        <label class="layui-form-label required">页面标题</label>
        <div class="layui-input-block">
            <input name="pageName" placeholder="请输入页面标题" type="text" class="layui-input" maxlength="20"
                   lay-verify="required" required/>
        </div>
    </div>
    <div class="layui-form-item" style="width: 60%">
        <label class="layui-form-label required" lay-tips="英文字母，不需要'/'" lay-direction="2">页面标识<span class="icon-text"><i class="layui-icon layui-icon-tips"></i></span></label>
        <div class="layui-input-block">
            <input name="pageCode" placeholder="页面标识" type="text" class="layui-input" maxlength="20"
                   lay-verify="code"/>
        </div>
    </div>
    <div class="layui-form-item" style="width: 60%">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input name="orderNo" placeholder="排序" type="number" class="layui-input"
                   lay-verify="number"/>
        </div>
    </div>

    <div class="layui-form-item layui-form-text" style="width: 90%">
        <label class="layui-form-label" for="editor">页面内容</label>
        <div class="layui-input-block">
            <script id="editor" type="text/plain" style="width: 100%;height:320px;"></script>
         </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" id="state" name="state" lay-skin="switch" value="0" checked lay-text="正常|禁用">
        </div>
    </div>
    <div class="layui-form-item text-left" style="margin-left:50px;">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="formSubmit" lay-submit>保存</button>
    </div>
</form>
<!-- js部分 -->
<div th:replace="admin/layout/include::js"></div>
<div th:replace="admin/layout/include::uejs"></div>

<script>
    //实例化编辑器b
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor',{
        /*toolbars:[[
            'paragraph','bold','italic','fontsize','fontborder','forecolor','backcolor','|','anchor','link','|','lineheight',
            'indent','justifyleft','justifycenter','|','insertcode','insertimage','fullscreen', //全屏
        ]
        ],*/
        textarea:'contentHtml'
    });
</script>

<script>
    layui.use(['layer', 'admin', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        // 回显数据
        var page = admin.getTempData('t_page');
        if (page) {
            form.val('data-form',page);
            console.warn(page);
            $('#state').prop('checked',page.state==0?"checked":"");
            form.render();
            UE.getEditor('editor').setContent(page.contentHtml);
        }

        // 表单提交事件
        form.on('submit(formSubmit)', function (data) {
            data.field.state = data.field.state==0?'0':'1';
            // 表单提交事件
            B.post({
                url: '/admin/sitePage/',
                loading: true,
                data: data.field,
                success: function (data) {
                    if (data.success) {
                        top.layer.msg(data.msg, {icon: 1});
                        admin.putTempData('formOk', true);  // 操作成功刷新表格
                        // 关闭当前iframe弹出层
                        parent.layer.close(parent.layer.getFrameIndex(window.name));

                    } else {
                        top.layer.msg(data.msg, {icon: 2});
                    }
                }
            });
            return false;
        });
        form.verify({
            code: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9]+$").test(value)){
                    return '页面标识只能包括字母和数字';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '页面标识首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '页面标识不能全为数字';
                }
            }
        });

    });
</script>

</body>